<template>
  <div>
    <Row>
      <Button class="mybtn1" type="info" icon="md-add-circle" @click="addTask">添加</Button>
    </Row>
    <Table :loading="loading" border :columns="taskColumns" :data="taskData">
      <template slot-scope="{ row, index }" slot="action">
        <div v-if="!row.IsEdit">
          <Button type="primary" icon="ios-build" size="small" class="btn" @click="row.IsEdit = true">编辑</Button>
          <Poptip confirm
                  transfer
                  title="是否删除?"
                  @on-ok=""
                  @on-cancel="$Message.info('已取消')">
            <Button type="error" icon="md-trash" size="small">删除</Button>
          </Poptip>
        </div>
        <div v-else>
          <Button type="success" icon="ios-paper" size="small" class="btn"
                  @click="saveaddOrUpdate(row, index)">保存
          </Button>
          <Button type="info" icon="ios-hand" size="small" @click="cancel(row, index)">取消</Button>
        </div>
      </template>
    </Table>
    <setting-supervisor :modal = "modal" />
    <bind-task-and-courses :modal="modal"/>
  </div>
</template>

<script>
import settingSupervisor from "../../components/modal/task/settingSupervisor";
import bindTaskAndCourses from "../../components/modal/task/bindTaskAndCourses";
export default {
  name: "setTask",
  components:{settingSupervisor,bindTaskAndCourses},
  data() {
    return {
      taskTypeList: [],
      loading: false,
      map: {
        page: 1,
        size: 10
      },
      modal:{
        settingSupervisorFlag:false,
        taskId:null
      },
      taskColumns: [
        {
          type: "index",
          width: 70,
          title: "序号",
          align: "center",
        },
        {
          title: "任务名称",
          align: "center",
          render: (h, params) => {
            if (params.row.IsEdit) {
              return <i-input v-model={params.row.taskName}/>;
            } else {
              return <span>{params.row.taskName}</span>;
            }
          },
        },
        {
          title: "任务类型",
          render: (h, params) => {
            if (params.row.IsEdit) {
              return <i-select v-model={params.row.taskTypeId} transfer>
                {
                  this.taskTypeList.map(m => {
                    return <i-option value={m.taskTypeId}>
                      {m.taskName}
                    </i-option>
                  })
                }
              </i-select>;
            } else {
              return <span v-show={this.taskTypeList.find(f => f.taskTypeId == params.row.taskTypeId) != undefined}>{
                this.taskTypeList.find(f => f.taskTypeId == params.row.taskTypeId).taskName
              }</span>;
            }
          },
        },
        {
          title: "课程数量",
          align: "center",
          width: 100,
          render: (h, params) => {
            return <div>
              <i-button style="margin-right:5px" type="success" icon="md-build" size="small" class="btn"
                        onClick={() => {
                          this.modal.bindTaskAndCourses = true;
                          this.modal.taskId = params.row.taskId
                          alert(this.modal.taskId)
                        }
                        }></i-button>
              <Tag color="warning">0</Tag>
            </div>;
          }
        },
        {
          title: "督导数量",
          align: "center",
          width: 100,
          render: (h, params) => {
              return <div>
                <i-button style="margin-right:5px" type="primary"  icon="md-build" size="small" onClick={ ()=>{
                    this.modal.settingSupervisorFlag = true
                    this.modal.taskId = params.row.taskId
                  } } className="btn"></i-button>
                <Tag color="warning">{params.row.userIdList.length}</Tag>
              </div>;
          },
        },
        {
          title: "开始时间",
          align: "center",
          width: 160,
          render: (h, params) => {
            if (params.row.IsEdit) {
              return <DatePicker transfer type="date" v-model={params.row.startTime}/>;
            } else {
              return <span>{new Date(params.row.startTime).toLocaleDateString()}</span>;
            }
          },
        },
        {
          title: "最后拒绝时间",
          align: "center",
          width: 160,
          render: (h, params) => {
            if (params.row.IsEdit) {
              return <DatePicker transfer type="date" v-model={params.row.refusedTime}/>;
            } else {
              return <span>{new Date(params.row.refusedTime).toLocaleDateString()}</span>;
            }
          },
        },
        {
          title: "最后申请时间",
          align: "center",
          width: 160,
          render: (h, params) => {
            if (params.row.IsEdit) {
              return <DatePicker transfer type="date" v-model={params.row.applyEndTime}/>;
            } else {
              return <span>{new Date(params.row.applyEndTime).toLocaleDateString()}</span>;
            }
          },
        },
        {
          title: "发布",
          align: "center",
          width: 90,
          render: (h, params) => {
           return  <i-switch v-model={params.row.issue} disabled={false} before-change={(val)=>{
             return new Promise((resolve) => {
               this.$Modal.confirm({
                 title: '切换确认',
                 content: '您确认要切换开关状态吗？',
                 onOk: () => {
                   resolve();
                   this.MySocket.commit("postTask", JSON.stringify(params.row))
                 }
               });
             });
             }}>
               <span slot="open">是</span>
               <span slot="close">否</span>
             </i-switch>
          },
        },
        {
          title: '操作',
          slot: 'action',
            width: 200,
          align: 'center'
        }
      ],
      taskData: [],
      objTaskData: []
    };
  },
  methods: {
    getTaskType() {
      this.http.get('/TaskUser/getAllTaskType').then((res) => {
        if (res.data) {
          this.taskTypeList = res.data
        }
      })
    },
    addTask() {
      this.taskData.unshift({
        taskName:null,
        taskId: null,
        taskTypeId: null,
        refusedTime: null,
        startTime: null,
        applyEndTime: null,
        IsEdit: true
      })
    },
    saveaddOrUpdate(row, index) {
      for (let key in row) {
        if (key !== "taskId" && key != "_index" && key != "codeDO" && !row[key]) {
          return this.$Message.error({
            background: true,
            content: "不能用空数据"
          })
        }
      }
      /**
       * 添加
       */
      if (row.taskId == null) {
        this.http.post("/task/saveAddTask", this.qs.parse(row)).then(res => {
          if (res.data) {
            this.$Message.success({
              background: true,
              content: "添加成功"
            })
            row.IsEdit = false
            row.taskId = res.data
          }
        })
      }/**
       *修改
       */
      else {
        this.http.put("/task/saveUpdateTask", this.qs.parse(row)).then(res => {
          if (res.data) {
            row.IsEdit = false
            this.$Message.success({
              background: true,
              content: "修改成功"
            })
          }
        })
      }
    },
    cancel(row, index) {
      /**
       * 取消添加
       */
      if (!row.taskId) {
        this.taskData.shift()
      }
      /**
       * 取消编辑
       */
      else {
        Object.assign(row, this.objTaskData[index])
      }
    },
    getAllTasks() {
      this.loading = true
      this.http.post('/task/getAllTasks', this.qs.parse(this.map)).then(res => {
        if (res.data) {
          this.loading = false
          this.taskData = res.data.list.map(m => {
            m.IsEdit = false
            return m
          })
          Object.assign(this.objTaskData, this.taskData)
        }
      })
    }
  },
  created() {
    this.getTaskType()
    this.getAllTasks()
  }
};
</script>

<style scoped>
.btn {
  margin-right: 5px
}
</style>
